use lazy_static::lazy_static;
use stylist::yew::styled_component;
use yew::{classes, function_component, html, Callback, Html, Properties};

#[derive(Properties, Debug, PartialEq)]
pub struct PromptProps {
    pub msg: String,
    #[prop_or_default]
    pub on_confirm: Callback<()>,
}
#[styled_component]
pub fn Prompt(props: &PromptProps) -> Html {
    let msg = props.msg.clone();
    let on_confirm = props.on_confirm.clone();
    html! {
        <div class={css!(r#"
          display: flex;
          position: fixed;
          width: 100%;
          height: auto;
          justify-content: center;
          align-items: center;
          top: 0;
          bottom: 0;
          background-color: rgba(128,128,128,0.4);
        "#)}>
            <div class={classes!("column", "content-center", "align-center", css!(r#"
                position:absolute;
                width: 50%;
                height: 100px;
            "#))}>
                <div>{msg.clone()}</div>
                <div>
                    <button onclick={move |_|on_confirm.clone().emit(())}>{"确定"}</button>
                </div>
            </div>
        </div>
    }
}
